<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>欢迎页</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.2/sockjs.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>


</head>
<body>
		<h1>欢迎页</h1>
		<a href="${pageContext.request.contextPath }/page/login">登录</a><br>
		<a href="${pageContext.request.contextPath }/mail/sendMail">发送测试邮件</a><br>
		<button id = "stop">stop basic websocket</button>
		
<script type="text/javascript">
<!-- 使用原生的websocket时  需要在根配置文件中引入rootpackege.spring.websocket.basicwebsocket.WebSocketConfig.java配置文件 -->

/* $(function(){
	alert(1)
	var sock = new WebSocket('ws://' + window.location.host+'/basic');
    sock.onopen = function() {
  	  console.log('Opening');
  	  sayMarco();
    }
    
    sock.onmessage = function(e) {
  	  console.log('Received message: ', e.data);
  	  setTimeout(function(){sayMarco()}, 2000);
    }
    
    sock.onclose = function() {
  	  console.log('Closing');
    }
    
    function sayMarco() {
  	  console.log('Sending Marco!');
  	  sock.send("Marco!");
    }

    $('#stop').click(function() {sock.close()});
	
	
}) */
</script>

<script type="text/javascript">

<!-- 使用socketJs时  兼容性更好    需要在根配置文件中引入rootpackege.spring.websocket.basicwebsocket.WebSocketConfig.java配置文件 -->

/* $(function(){
	alert(1)
	var sock = new SockJS('http://' + window.location.host+'/test/basic');
    sock.onopen = function() {
  	  console.log('Opening');
  	  sayMarco();
    }
    
    sock.onmessage = function(e) {
  	  console.log('Received message: ', e.data);
  	  setTimeout(function(){sayMarco()}, 2000);
    }
    
    sock.onclose = function() {
  	  console.log('Closing');
    }
    
    function sayMarco() {
  	  console.log('Sending Marco!');
  	  sock.send("Marco!");
    }

    $('#stop').click(function() {sock.close()});
	
	
}) */
</script>

<script type="text/javascript">

/**
 

    //1.当stomp使用的是简单的消息代理时  使用这段代码就能实现websocket通讯
    
	var url = 'http://'+window.location.host+'/basic'; //建立wesocket连接，连接建立之后所有通讯都在通道内部，因此后续不需要在加上'http://'+window.location.host前缀了
	var sock = new SockJS(url);  //创建SockJS连接。
	var stomp = Stomp.over(sock);//创建STOMP客户端实例。实际上封装了SockJS,这样就能在WebSocket连接上发送STOMP消息。
	var payload = JSON.stringify({'msg':'Marco!'});
	stomp.connect({},function connectCallback(frame){
		//send方法指定的访问路径 对应于@MessageMapping()注解指定的路径，--响应是通过订阅的主题或队列响应的，与http的请求相应模式不同
		stomp.send("/firstMsg",{},payload);
	});

	//2. 测试订阅模式  --订阅一次 会响应一次
	var url = 'http://'+window.location.host+'/basic';
	var sock = new SockJS(url);  //创建SockJS连接。
	var stomp = Stomp.over(sock);//创建STOMP客户端实例。实际上封装了SockJS,这样就能在WebSocket连接上发送STOMP消息。
	var payload = JSON.stringify({'msg':'Marco!'});
	stomp.connect('admin','admin',function connectCallback(frame){
		subscribMsg(stomp);
	});
	
	function subscribMsg(stomp){
		//subscribe方法指定的访问路径 对应于@SubscribeMapping()注解指定的路径，类似于http的请求响应
		stomp.subscribe("/subMsg", handleSpittle);
		
	}
	function handleSpittle(incoming) {
		console.log('Received: ', incoming);
		 
	}
	
	
*/
	
	//访问基于activemq消息代理的stomp
/* 	var url = 'http://'+window.location.host+'/basic';
	var sock = new SockJS(url);  //创建SockJS连接。
	var stomp = Stomp.over(sock);//创建STOMP客户端实例。实际上封装了SockJS,这样就能在WebSocket连接上发送STOMP消息。
	var payload = JSON.stringify({'msg':'Marco!'});
	//js中用户名密码可以设置可以不设，不设置的时候用"{}"代替 ， 设置的时候用逗号分隔字符串即可
	stomp.connect({},function connectCallback(frame){
		stomp.send("/app/firstMsg",{},payload);
		subscribMsg(stomp);
	});
	
	function subscribMsg(stomp){
		//subscribe方法指定的访问路径 对应于@SubscribeMapping()注解指定的路径，类似于http的请求响应
		stomp.subscribe("/topic/responseMsg", handleSpittle);
		
	}
	function handleSpittle(incoming) {
		console.log('订阅接收消息: ', incoming);
		 
	} */
	
	
	
	
	
	
	var url = 'http://'+window.location.host+'/basic';
	var sock = new SockJS(url);  //创建SockJS连接。
	var stomp = Stomp.over(sock);//创建STOMP客户端实例。实际上封装了SockJS,这样就能在WebSocket连接上发送STOMP消息。
	var payload = JSON.stringify({'msg':'针对用户发送消息!'});
	//js中用户名密码可以设置可以不设，不设置的时候用"{}"代替 ， 设置的时候用逗号分隔字符串即可
	stomp.connect({},function connectCallback(frame){
		stomp.send("/app/msg2UserbyAnnotation",{},payload);
		subscribMsg(stomp);
	});
	
	function subscribMsg(stomp){
		//subscribe方法指定的访问路径 对应于@SubscribeMapping()注解指定的路径，类似于http的请求响应
		stomp.subscribe("/user/queue/userNoti", handleSpittle);
		
	}
	function handleSpittle(incoming) {
		console.log('订阅接收消息: ', incoming);
		 
	}
</script>
</body>

</html>